import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { v4 as uuidv4 } from "uuid";
// import { diff } from "jsondiffpatch"

import bg from "@/assets/img/loginbg2.jpg";
import logo from "@/assets/img/logo.png";
import { Form, Input } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next";

import useUserStore from "../store/user";
import useSystemStore from "../store/system";
import useWebSocketStore from "../store/webSocket";
// import useFileStore from "../store/files";
import axios from "axios";

export default function Dlogin() {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const navigation = useNavigate();
  const { setUser } = useUserStore();
  const softwareType = useSystemStore((state) => state.softwareType);
  const [tipsShow, updateTipShow] = useState(false);
  const isConnected = useWebSocketStore((state) => state.isConnected);
  const sendMessage = useWebSocketStore((state) => state.sendMessage);
  //登录成功
  const onFinish = (values) => {
    console.log("Success:", values);
    setUser(values);
    navigation("/home");
    sendMessage(JSON.stringify({ type: "login", data: values }));
    // addFile()
  };
  //关机
  const confirmShotDown = () => {
    handleSpeak("今天天气真好!");
  };

  const handleSpeak = async (text) => {
    handleFetchAudio(text);
  };

  const handleFetchAudio = async (text) => {
    const {data} = await axios.post("http://localhost:5050/synthesize", {
      text: text,
      id: uuidv4(),
    });
    if (data.code == 200) {
      const audio = new Audio(`data:audio/wav;base64,${data.data.Audio}`);
      audio.play();
    }
  };

  useEffect(() => {
    // const a = diff({ objects: [{a:1}] }, { objects: [{b:1}] })
    // console.log("diff:", a);
    // window.speechSynthesis.onvoiceschanged = getVoices;
  }, [isConnected]);

  return (
    <div
      className="w-full h-full flex items-center justify-center bg-no-repeat bg-cover"
      style={{ backgroundImage: `url(${bg})` }}
    >
      <div className="w-800 px-4 py-5 bg-custom-bg rounded-lg flex items-center justify-center flex-col shadow-2xl">
        <div className={`w-full h-14 flex items-center justify-around mt-1`}>
          <img className="w-[226px] h-12" src={logo}></img>
          <span className="text-4xl text-custom-gray tracking-normal">
            {softwareType == 1 ? t("title.login") : t("title.login2")}
          </span>
        </div>
        <div className=" w-full flex items-center flex-col my-2">
          <span className="text-28px text-custom-gray">
            CORUS-MX7 {t("job.pat")}
          </span>
        </div>
        <div className={`w-[76%] flex items-center justify-center flex-col`}>
          <div className="w-full text-xl text-custom-gray m-2">
            {t("tips.systemLogin")}
          </div>
          <Form
            form={form}
            name="basic"
            autoComplete="off"
            onFinish={onFinish}
            style={{ width: "100%" }}
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入用户名!",
                },
              ]}
              placeholder="账号"
            >
              <Input
                addonBefore={
                  <UserOutlined
                    style={{ fontSize: "20px", color: "#ffffff" }}
                  />
                }
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: "请输入密码!",
                },
              ]}
              placeholder="密码"
            >
              <Input.Password
                addonBefore={
                  <LockOutlined
                    style={{ fontSize: "20px", color: "#ffffff" }}
                  />
                }
              />
            </Form.Item>
            <Form.Item>
              <div>
                <div className=" flex items-center relative">
                  <div
                    className="text-xl text-custom-gray hover:text-turquoise cursor-pointer flex mr-3"
                    onClick={() => {
                      updateTipShow(!tipsShow);
                    }}
                  >
                    {t("tips.forgotPassword")}
                  </div>
                  {tipsShow ? (
                    <span className="triangle-after text-xl  text-custom-gray rounded-md bg-tips-bg p-2 relative">
                      {t("tips.contact")}:17740669751
                    </span>
                  ) : (
                    ""
                  )}
                </div>
              </div>
            </Form.Item>
            <Form.Item>
              <div className="w-full flex items-center justify-between">
                <button
                  className="btn delete w-40  h-14 text-28px"
                  type="button"
                  onClick={confirmShotDown}
                >
                  {t("btn.shutdown")}
                </button>
                <button className="btn w-40 h-14  text-28px" type="submit">
                  {t("btn.login")}
                </button>
              </div>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}
